<template>
  <div class="repair-page">
    <div class="container">
      <div class="title-box">
        <h1>用户管理</h1>
        <el-input placeholder="请输入要搜索的用户id" v-model="keyword" @input="handleSearch" />
      </div>
      <el-table border :data="tableData" stripe style="width: 100%">
        <el-table-column prop="user_id" label="用户ID" />
        <el-table-column prop="name" label="名字" />
        <el-table-column prop="mobile" label="联系方式" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="password" label="密码" />
        <el-table-column prop="create_time_text" label="注册时间" />
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const tableData = ref([]);
const totalNum = ref(0);
const currentPage = ref(1);
const pageSize = ref(5);
const keyword = ref("");
let debounceTimer = null;

const handleSearch = () => {
    // 防抖
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        getTableData();
    }, 300);
}

const getTableData = async () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    keyword: keyword.value,
    role: 0,
  };

  const { data } = await axios.post("/get_user_list", params);

  if (typeof data === "object") {
    const { result, total } = data;
    tableData.value = result.map((item) => {
      const { role, create_time } = item;
      return {
        ...item,
        create_time_text: dayjs(create_time).format("YYYY-MM-DD HH:mm:ss"),
      };
    });
    totalNum.value = total;
  } else {
    ElMessage.error("服务端异常");
  }

  console.log(data);
};


const handleSizeChange = (value) => {
  pageSize.value = value;

  getTableData();
};

const handleCurrentChange = (value) => {
  currentPage.value = value;

  getTableData();
};


getTableData();
</script>

<style scoped>
.repair-page {
  width: 100%;
}

.container {
  width: 95%;
  margin: 0 auto;
  padding: 30px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 40px;
}

.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}

.title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-box .el-input {
    width: 400px;
}
</style>